<template>
	<view class="content">
		<u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="89" width="100%">
			<div class="title">售后管理</div>
		
			<view class="left-box" @tap="onClickLeft">
				<u-icon name="arrow-left" size="40" color="#FFF"></u-icon>
			</view>
		</u-navbar>
		<view class="u-tabs-box">
			<u-tabs bg-color="#fff" :list="list" :is-scroll="false" :current="current" @change="change"
				:active-color="$lightColor"></u-tabs>
		</view>
		<scroll-view class="body-view" scroll-y @scrolltolower="renderDate">
			<view class="seller-view" v-for="(order, orderIndex) in orderList" :key="orderIndex">
				<view class="seller-info u-flex u-row-between">
					<view class="seller-name wes" @click="navigateToStore(order)">
						<view class="name wes">{{ order.storeName }}</view>
					</view>
					<view class="order-sn">{{current == '0' ? '售后申请中' : '已完成' }}</view>
				</view>
				<view>
					<view>
						<view class="goods-item-view" @click="navigateToOrderDetail(order.id)">
							<view class="goods-img">
								<u-image border-radius="6" width="100%" height="100%" :src="order.image.split(',')[0]">
								</u-image>
							</view>

							<view class="goods-name">
								{{order.name}}
							</view>

							<view class="goods-price">
								¥{{order.price}}
							</view>

							<view class="goods-num">
								{{order.specifications}} x{{order.num}}
							</view>

							<view class="goods-sku">
								
							</view>

						</view>
					</view>

					<view class="shifukuan">
						实付款 ¥{{order.allPrice}}
					</view>
				</view>
			</view>


			<u-loadmore bg-color="#f8f8f8" :status="status" />
		</scroll-view>

	</view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import {
	getOrderList
} from "@/api/order.js";
import storage from "@/utils/storage";

export default {
	components: {
		uniLoadMore,
	},
	data() {
		return {
			navObj: {
				backgroundColor: 'rgb(25, 189, 93)',
			},
			list: [
				//tab表头
				{
					name: "申请中",
				},
				{
					name: "申请记录",
				},
			],
			current: 0, //当前表头索引
			orderList: [], //订单集合
			params: {
				page: 1,
				limit: 10,
			},
			status: "loadmore",
		};
	},

	onBackPress(e) {

		uni.navigateTo({
			url: '/pages/tabbar/user/my'
		});


	},

	onLoad(options) {
		this.orderList = [];
		this.params.page = 1;
		this.getOrderList()
	},
	onPullDownRefresh() {
		this.change(this.current);
	},

	methods: {
		
		onClickLeft() {
			
			uni.switchTab({
			  url: "/pages/tabbar/user/my",
			});
		},
		change(index) {
			this.current = index;
			this.params = {
				page: 1,
				limit: 10,
			};
			this.orderList = [];
			this.getOrderList()
			uni.stopPullDownRefresh();
		},

		navigateToOrderDetail(sn) {

			uni.navigateTo({
				url: "/pages/order/orderDetail?sn=" + sn

			});
		},

		navigateToStore(val) {
			uni.navigateTo({
				url: "/pages/product/shopPage?id=" + val.storeId,
			});
		},


		getOrderList() {
			uni.showLoading({
				title: "加载中",
				mask: true,
			});
			getOrderList({
				type: this.current == 0 ? '5' : '6',
				userId: storage.getUserInfo().id,
				...this.params
			}).then((res) => {
				if (this.$store.state.isShowToast) {
					uni.hideLoading()
				};
				const orderList = res.data.list;
				if (orderList.length > 0) {
					this.orderList = this.orderList.concat(orderList);

				}
				if (orderList.length < 10) {
					this.status = "nomore";
				} else {
					this.status = "loading";
				}
			});
		},
		/**
		 * 底部加载数据
		 */
		renderDate() {
			this.params.page += 1;
			this.getOrderList();
		},
	},
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
	height: 100%;
}


.title {
	position: absolute;
	top: 80rpx;
	left: 50%;
	transform: translateX(-50%);
	font-family: PingFang;
	font-weight: bold;
	font-size: 33rpx;
	color: #FFFFFF;

}

.left-box {
	padding-left: 41rpx;
}
.body-view {
	overflow-y: auto;
	height: calc(100vh - 44px - 80rpx - 104rpx);
}

.u-tabs-search {
	padding: 20rpx;
	background: #fff;
}

.countMoney {
	margin-left: 7rpx;
	color: $main-color;
	font-size: 28rpx;
}

.seller-view {
	background-color: #fff;
	margin: 20rpx 0rpx;
	padding: 0rpx 20rpx;
	border-radius: 20rpx;

	.seller-info {
		height: 70rpx;

		.seller-name {
			font-size: 28rpx;
			display: flex;
			flex-direction: row;

			.name {
				margin-left: 15rpx;
				margin-top: -2rpx;
			}
		}

		.order-sn {
			font-size: 22rpx;
			color: #909399;
		}
	}

	.goods-item-view {
		display: flex;
		flex-direction: row;
		padding: 10rpx 10rpx;

		.goods-img {
			width: 131rpx;
			height: 131rpx;
		}

		.goods-info {
			padding-left: 30rpx;
			flex: 1;

			.goods-title {
				margin-bottom: 10rpx;
				color: #333333;
			}

			.goods-specs {
				font-size: 24rpx;
				margin-bottom: 10rpx;
				color: #cccccc;
			}

			.goods-price {
				font-size: 28rpx;
				margin-bottom: 10rpx;
				color: #ff5a10;
			}
		}

		.goods-num {
			width: 60rpx;
			color: $main-color;
		}
	}

	.btn-view {
		padding: 16rpx 0;

		.after-line {
			display: flex;
			line-height: 90rpx;
		}
	}
}

.description {
	color: #909399;
	size: 25rpx;
}

.cannot_apply {
	text-align: center;
	font-size: 22rpx;

	color: #999999;
	height: 70rpx;
	line-height: 70rpx;
}

.not_center {
	text-align: left;
}

.icon {
	margin-right: 10rpx;
}

.sale {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

.default-btn {
	background-color: #ffffff;
	margin-left: 15rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	font-size: 24rpx;
	padding: 0 24rpx;
	border-radius: 200px;
}

.close {
	color: $light-color;
}

.border {
	border: 2rpx solid $light-color;
	color: $light-color;
}


.seller-view {
	border-radius: 20rpx;
	background-color: #fff;
	margin: 20rpx 0rpx;

	.seller-info {
		height: 70rpx;
		padding: 0 20rpx;

		.seller-name {
			flex: 10;
			font-size: 28rpx;
			font-weight: 600;
			display: flex;
			flex-direction: row;

			.name {
				margin-left: 15rpx;
				margin-top: -2rpx;
			}
		}

		.order-sn {
			flex: 2;
			width: 240rpx;
			text-align: center;
			color: $aider-light-color;
			font-size: 26rpx;
		}
	}

	.goods-item-view {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 10rpx 34rpx;

		position: relative;

		.goods-name {
			position: absolute;
			width: 389rpx;
			height: 55rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			line-height: 27rpx;
			left: 178rpx;
		}

		.goods-img {
			width: 131rpx;
			height: 131rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}

		.goods-price {
			font-size: 28rpx;
			margin-bottom: 10rpx;
			position: absolute;
			right: 31rpx;
		}

		.goods-num {

			font-family: Arial;
			font-weight: 400;
			font-size: 17rpx;
			color: #999999;
			position: absolute;
			top: 60rpx;
			right: 31rpx;
		}

		.goods-sku {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 25rpx;
			color: #999999;
			position: absolute;
			top: 80rpx;
			left: 178rpx;
		}

		.goods-info {
			padding-left: 30rpx;
			flex: 1;

			.goods-title {
				margin-bottom: 10rpx;
				color: #333333;
			}

			.goods-specs {
				font-size: 24rpx;
				margin-bottom: 10rpx;
				color: #cccccc;
			}


		}


	}

	.shifukuan {
		width: 100%;
		height: 65rpx;
		line-height: 65rpx;
		font-family: Arial;
		font-weight: 400;
		font-size: 21rpx;
		color: #000000;
		padding-right: 20rpx;
		text-align: right;
	}

	.btn-view {
		padding: 25rpx 30rpx;
		font-size: 26rpx;

		.description {
			display: flex;
			color: #909399;
			size: 24rpx;
			flex: 1;

			.price {
				color: $main-color;

			}
		}
	}
}

::v-deep .u-tab-bar {
	display: none;
}
</style>
